import React from "react";
import { Card, Row, Col, Modal } from "antd";
export default class HuaL extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 1,
      visibles: false
    };
  }

  openImg = item => {
    this.setState({
      imgSru: "/partu/" + item,
      visibles: true
    });
  };

  render() {
    const imgs = [
      ["1.png", "2.jpg", "3.jpg", "4.jpg", "5.jpg"],
      ["6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg"],
      ["11.jpg", "12.gif", "13.jpg", "14.jpg", "15.jpg"],
      ["16.gif", "17.jpg", "18.jpg", "19.gif", "20.jpg"]
    ];

    const lisimg = imgs.map(lis =>
      lis.map(item => (
        <Card
          style={{ marginBottom: 10, cursor: 'pointer' }}
          cover={<img src={"/partu/" + item} alt="" />}
          onClick={() => this.openImg(item)}
        >
          <Card.Meta title="Png" description="You SB" />
        </Card>
      ))
    );
    return (
      <div className="card-wrap">
        <Row gutter={10}>
          {lisimg.map(item => (
            <Col md={6}>{item}</Col>
          ))}
        </Row>
        <Modal
          width={400}
          height={500}
          title={this.state.imgSru}
          onCancel={() => {
            this.setState({
              visibles: false
            });
          }}
          visible={this.state.visibles}
          footer={null}
        >
          {<img style={{ width: "100%" }} src={this.state.imgSru} alt="" />}
        </Modal>
      </div>
    );
  }
}
